<template>
  <div>
    <!-- product.html 12-98 -->
    <!--面包屑导航-->
    <div class="breadcrumb">
      <div class="container">
        <h2><a href="">首页</a>&gt;<a href="">产品中心</a></h2>
      </div>
    </div>
    <!--页面主体-->
    <div class="main container" v-if="data">
      <div class="pl_header">
        <router-link to="/product/1" :class="{ cur: type == 1 }"
          >净美仕净化器</router-link
        >
        <router-link to="/product/2" :class="{ cur: type == 2 }"
          >净美仕滤网</router-link
        >
      </div>
      <!-- 产品列表-->
      <ul class="product_list clearfloat">
        <!-- :data="JS代码" -->
        <product-item
          :data="item"
          v-for="(item, index) in data.data"
          :key="index"
        />
        <!--<li>-->
        <!--<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>-->
        <!--<div class="pdlist_text clearfloat">-->
        <!--<h3>-->
        <!--<p>M-8088A</p>-->
        <!--<span>带“大脑”的空气净化器</span>-->
        <!--</h3>-->
        <!--<a href="">查看详情</a>-->
        <!--</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>-->
        <!--<div class="pdlist_text clearfloat">-->
        <!--<h3>-->
        <!--<p>M-8088A</p>-->
        <!--<span>带“大脑”的空气净化器</span>-->
        <!--</h3>-->
        <!--<a href="">查看详情</a>-->
        <!--</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>-->
        <!--<div class="pdlist_text clearfloat">-->
        <!--<h3>-->
        <!--<p>M-8088A</p>-->
        <!--<span>带“大脑”的空气净化器</span>-->
        <!--</h3>-->
        <!--<a href="">查看详情</a>-->
        <!--</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>-->
        <!--<div class="pdlist_text clearfloat">-->
        <!--<h3>-->
        <!--<p>M-8088A</p>-->
        <!--<span>带“大脑”的空气净化器</span>-->
        <!--</h3>-->
        <!--<a href="">查看详情</a>-->
        <!--</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>-->
        <!--<div class="pdlist_text clearfloat">-->
        <!--<h3>-->
        <!--<p>M-8088A</p>-->
        <!--<span>带“大脑”的空气净化器的空气净化器的空气净化器</span>-->
        <!--</h3>-->
        <!--<a href="">查看详情</a>-->
        <!--</div>-->
        <!--</li>-->
      </ul>
      <!-- 分页导航-->
      <div class="pages">
        <!--<a href="">上一页</a>-->
        <!--<a href="">1</a>-->
        <!--<a href="" class="cur">2</a>-->
        <!--<a href="">3</a>-->
        <!--<a href="">4</a>-->
        <!--<a href="">5</a>-->
        <!--<a href="">下一页</a>-->
      </div>
    </div>
  </div>
</template>

<script>
import ProductItem from '../components/ProductItem.vue'
export default {
  components: { ProductItem },
  // type: 是一个可选参数, 如果不传参默认是undefined
  props: {
    // 属性的详细配置:  属性名: {配置项}
    type: {
      default: 1, //默认值
    },
  },
  data() {
    return {
      data: null,
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    getData(pno) {
      let url = `product_select.php?type=${this.type}&pageNum=${pno}`
      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
  },
  //利用监听器 在路由变化时, 再次发送请求
  watch: {
    // 路由参数: $route
    $route(newValue, oldValue) {
      this.getData(1)
    },
  },
}
</script>

<style lang="scss" scoped></style>
